import * as THREE from 'three';
import { AxesHelper, BoxGeometry, Mesh, MeshLambertMaterial, PerspectiveCamera } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default class ThreeHelper {
  constructor() {}

  private creatCamera = () => {
    const camera = new PerspectiveCamera();
    camera.position.set(250, 250, 250);
    camera.lookAt(this.mesh.position);
    return camera;
  };

  geometry: THREE.BoxGeometry = new BoxGeometry(60, 90, 80);

  material: THREE.MeshLambertMaterial = new MeshLambertMaterial({ color: 0x009900, transparent: true, opacity: 0.5 });

  mesh: THREE.Mesh = new Mesh(this.geometry, this.material);

  camera: THREE.PerspectiveCamera = this.creatCamera();

  axesHelper: THREE.AxesHelper = new AxesHelper(400);

  scene: THREE.Scene = new THREE.Scene();

  light: THREE.PointLight = null;
  creatLight = () => {
    const light = new THREE.PointLight(0xffffff, 1.0);
    light.intensity = 300.0; //光照强度
    light.decay = 0.0; //设置光源不随距离衰减
    light.position.set(500, 500, 500);
    this.light = light;
  };

  addControls = () => {
    const controlls = new OrbitControls(this.camera, this.renderer.domElement);
    // requestAnimationFrame 就不需要重新render了
    // controlls.addEventListener('change', () => {
    //   this.renderer.render(this.scene, this.camera);
    // });
  };

  renderer: THREE.WebGLRenderer = null;
  creatRenderer = (width: number, height: number, dom: HTMLElement) => {
    const renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0x555555, 1);
    this.renderer = renderer;

    this.scene.add(this.mesh);
    this.scene.add(this.axesHelper);
    this.creatLight();
    this.scene.add(this.light);
    this.addControls();

    dom.appendChild(renderer.domElement);

    this.renderer.render(this.scene, this.camera);
    // this.animationRender();
  };

  animationRender = () => {
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.animationRender);
  };
}
